<template>
	<view class="bg">
		<view class="box">
			<view class="txh-top-pay">
				<image src="/static/mine/txh-top-pay.png" mode="" class="img"></image>
			</view>
			<view class="content">
				<image :src="base64Image" mode="" style="width: 390rpx; height: 390rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTransferToKllzServiceQrCode
	} from "@/api/api.js"
	export default {
		data() {
			return {
				qrcodeUrl: '',
				base64Image: '',
				timer: null, // 用于存储定时器
			}
		},
		components: {

		},
		mounted() {
			this.startTimer();
		},
		onShow() {
			// this.getTransferToKllzServiceQrCode();
		},
		onHide() {
			this.stopTimer();
		},
		methods: {
			startTimer() {
				// 设置定时器，每分钟执行一次
				this.timer = setInterval(() => {
					this.getTransferToKllzServiceQrCode();
				}, 60000);
			},
			stopTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			getTransferToKllzServiceQrCode() {
				let data = {}
				getTransferToKllzServiceQrCode(data).then(res => {
					console.log(res.data)
					this.base64Image = res.data.base64;
				})
			},
		},
	}
</script>

<style scoped lang="less">
	.bg {

		width: 100%;
		/* 或者具体的宽度 */
		height: 100%;
		/* 或者具体的高度 */
		background: url('@/static/mine/paymentCodeBkg.png') no-repeat;
		background-size: 100% 100%;
		/* 确保背景图片完全覆盖容器 */
		background-position: center center;
		/* 确保背景图片居中 */
		position: absolute;
		top: 0;
		left: 0;
		// #ifdef APP-PLUS
		padding-top: 230rpx;
		// #endif 
		// #ifdef H5
		padding-top: 180rpx;
		// #endif 
		box-sizing: border-box;
		text-align: center;

		.box {
			// position: relative;
			// top: 230rpx;
			// left: 50%;
			// margin-left: -160rpx;
			width: 710rpx;
			// #ifdef APP-PLUS
			height: 1040rpx;
			// #endif 
			// #ifdef H5
			height: 900rpx;
			// #endif 

			// margin-top: 130rpx;
			margin: 100rpx auto;
			background: url('@/static/mine/txh-pay-bkg.png') no-repeat;
			background-size: 100% 100%;
			/* 确保背景图片完全覆盖容器 */
			background-position: center center;

			.txh-top-pay {
				text-align: left;

				.img {
					width: 290rpx;
					height: 96rpx;
					margin-left: 100rpx;
					margin-top: 60rpx;
				}
			}

			.content {
				width: 400rpx;
				height: 400rpx;
				border: 1px solid #64C17C;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// #ifdef APP-PLUS
				margin: 30rpx auto;
				// #endif 
				// #ifdef H5
				margin: 10rpx auto;
				// #endif 
			}
		}
	}
</style>